<template>
	<div class="app">
		<h2>我是App 组件, x: {{ x }}</h2>

		<!-- 异步组件 可以使用 Suspense 来包装一下 -->
		<Suspense>
			<template #default>
				<Child />
			</template>

			<template #fallback>
				<div>
					<h2>加载中......</h2>
				</div>
			</template>
		</Suspense>


		<Demo />
	</div>
</template>

<script setup lang="ts" name="App">
/**
 *  https://cn.vuejs.org/guide/built-ins/suspense.html
 * 
 * */

import { ref, onMounted, Suspense } from "vue";
import Child from "./Child.vue";



</script>






<style scoped>
.app {
	background-color: #ddd;
	border-radius: 10px;
	padding: 5px;
	box-shadow: 0 0 10px;
	/* width: 400px;
	height: 400px; */
}

img {
	width: 270px;
}
</style>